<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
    </style>
</head>
<body>
<div id="box">
    <my-aaa :model="model"></my-aaa>
    <br>
    <span>我是父组件的信息------{{model}}</span>
</div>
<template id="aaa">
    <div>
        <h1>我是aaa</h1>
        <input type="button" @click="change" value="按钮">
        <ul>
            <li v-for="(value,key,index) in model">{{index}}-{{key}}-{{value}}</li>
        </ul>
    </div>
</template>
<script>
    var vm = new Vue({
        el: '#box',
        data:{
            model: {a: 'aaa', b: 'bbb', c: 'ccc'},
        },
        components: {
            'my-aaa': {
                props:['model'],
//                data(){
//                    return {
//                        model: {a: 'aaa', b: 'bbb', c: 'ccc'}
//                    }
//                },
                methods: {
                    change(){
                        this.model.a = 'changed';
                    }
                },
                template: '#aaa'
            }
        }
    });

</script>
</body>
</html>